<template>
  <a-layout id="components-layout-demo-fixed-sider">
    <a-layout-sider :style="{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0 }">
      <div class="logo" style>
        <img style="width: 23px; height: 23px" src="../../assets/logo.png" alt />
        <span>Ant Design Pro</span>
      </div>
      <ListNav @change="changeClick" :titleList="titleList" />
    </a-layout-sider>
    <a-layout :style="{ marginLeft: '200px' }">
      <a-layout-header
        :style="{
          position: 'fixed',
          background: '#fff',
          width: '88%',
          boxShadow: '0px 2px 2px 0px rgba(0, 0, 0, 0.1)',
          zIndex: 1,
        }"
      >
        <Nav />
      </a-layout-header>
      <a-layout-content :style="{ margin: '64px 16px 0', overflow: 'initial' }">
        <div :style="{ padding: '0 82px 0', background: '#fff' }">
          <table>
            <Delivery />
          </table>
        </div>
      </a-layout-content>
      <a-layout-footer :style="{ textAlign: 'center', margin: '0 auto' }">
        <Foot />
      </a-layout-footer>
    </a-layout>
  </a-layout>
</template>
<script>
import Nav from "@/components/Nav/index";
import Foot from "@/components/Foot/index";
import ListNav from "@/components/ListNav/index";
import Delivery from "@/components/Delivery/index";

export default {
  data() {
    return {
      titleList: [
        {
          value: "寺庙列表",
          type: "video-camera"
        },
        {
          value: "库存动态",
          type: "upload"
        },
        {
          value: "添加商品",
          type: "bar-chart"
        },

        {
          value: "销售商品",
          type: "cloud-o"
        },
        {
          value: "出库",
          type: "snippets"
        }
      ],
      count: 0,
      list: [],
      params: {
        page: 1,
        perPage: 20
      }
    };
  },
  components: {
    Nav,
    Foot,
    Delivery,
    ListNav
  },
  methods: {
    changeClick(index) {
      console.log(index);
      if (index == 0) {
        this.$router.push("/data/look");
      } else if (index == 1) {
        this.$router.push("/data/dynamic");
      } else if (index == 2) {
        this.$router.push("/data/addpro");
      } else if (index == 3) {
        this.$router.push("/data/salepro");
      }
    }
  }
};
</script>
<style>
#components-layout-demo-fixed-sider .logo {
  height: 32px;
  margin: 16px;
  background-color: rgba(0, 33, 64, 1);
  color: white;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
</style>
